<template>
    <div class="loginbody">
        <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8" >
                <div style="color:white;height: 60px">
                    <div style="display: inline-block;height: 60px;width: 19%;">
                        <el-image
                                style="width: 100%; height: 60px"
                                :src="loginLog"
                                fit="fill"></el-image>
                    </div>
                    <div style="display: inline-block;float:right;
                    height: 60px;width: 80%;

                    ">
                        <span style="margin-left: 10px;line-height: 60px;font-size: 25px;border-left: 3px solid white;box-sizing: border-box;"> 资源访问控制系统</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" >
                <div />
            </el-col>
        </el-row>
        <div style="height: 30px">

        </div>
        <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8">
                <div class="mydiv">
                    <div style="text-align: center;font-size: 20px;padding-top: 20px">通知</div>
                    <el-divider style="color: white"></el-divider>
                    <div style="padding:10px 20px 10px 20px;letter-spacing:2px;line-height: 30px ">
                        访问方法:进入登录主页，点击右上角“登录”，输入学号(或工号)及密码，登录成功之后即可浏览、检索和下载相关数字资源。<br>
                        附:数字资源常见问题<br>
                        服务咨询电话:123456789
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="logindata">
                    <div class="logintext">
                        <span>Welcome</span>
                    </div>
                    <div class="formdata">
                        <el-form ref="form"
                                 v-loading="loading"
                                 element-loading-text="正在登录..."
                                 element-loading-spinner="el-icon-loading"
                                 element-loading-background="rgba(0, 0, 0, 0.8)"
                                 :model="form"
                                 :rules="rules">
                            <el-form-item prop="account">
                                <el-input
                                        v-model="form.account"
                                        placeholder="请输入账号"
                                />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                        v-model="form.password"
                                        placeholder="请输入密码"
                                        show-password
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="tool">
                        <div>
                            <el-checkbox v-model="checked"
                                         style="color: white"
                            >记住密码</el-checkbox
                            >
                        </div>
                        <div>
                            <el-link type="primary">忘记密码？</el-link>
                        </div>
                    </div>
                    <div class="butt">
                        <el-button type="primary" style="width: 160px;height: 40px" @click="login()"
                        >登录</el-button
                        >
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import {getMenu}from '../api/loginAPI'
    import {getUserButton}from '../api/buttonApi'
    import loginLog from '@/assets/loginLog.png'
    import MldRegister from '@/views/sys/register/index'
    export default {
      data(){
        return {
            loading:false,
            loginLog:loginLog,
            form: {
                password: "",
                account: "",
            },
            checked: false,
            rules: {
                account: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { max: 10, message: "不能大于10个字符", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { max: 10, message: "不能大于10个字符", trigger: "blur" },
                ],
            },
        }
      },
        watch:{
            checked:{
                immediate:true,
                handler(newVal,OldVal){
                    if(newVal){
                        localStorage.setItem("remeber",JSON.stringify(this.form))
                        console.log(JSON.parse(localStorage.getItem("remeber")),2222)
                    }
                }

            }
        },
      methods:{
        reset(){
            this.form.account=''
            this.form.password=''
        },
      login() {
          this.loading=true;
          this.$refs['form'].validate((valid) => {
              this.loading=false
              if(valid){
                  this.postRequest('api/login',this.form).then(
                      res=>{
                          if(res.data.code==='000'){
                              localStorage.setItem("token",res.data.data.token)
                              localStorage.setItem("userInfo",JSON.stringify(res.data.data.userInfo))
                              // //登录flag
                              this.$store.commit('setLoginFlag')
                              this.$message({
                                  message: '登录成功',
                                  type: 'success'
                              });
                              //获取按钮
                              getUserButton({account:this.form.account}).then(res=>{
                                  const tempData=res.data.data
                                  localStorage.setItem('buttonList',JSON.stringify(tempData));
                              }).catch(e=>{
                                  this.$message.error("获取按钮信息失败，请联系管理员")
                              })
                              //读取菜单信息
                              getMenu().then(res=>{
                                  //保存菜单
                                  this.$store.commit('setMenu',JSON.stringify(res.data.data))

                                  location.reload();
                                  this.$router.replace({
                                      path:'/'
                                  })
                              }).catch(e=>{
                                  this.$message.error("获取菜单信息失败，请联系管理员")
                              })

                              //刷新界面

                          }else{
                              this.$message.error("登录失败")
                              this.form.account=''
                              this.form.password=''
                          }

                      }
                  ).catch(e=>{
                      this.$message.error("登录失败，请联系管理员")
                      this.form.account=''
                      this.form.password=''
                  })


              }else{
                  this.$message.error('校验失败');
                  this.form.account=''
                  this.form.password=''
              }
          });

      },
          register(){
              this.$msgBox.showDialog({
                  title: '用户注册',
                  top:'5vh',
                  content: MldRegister,
                  width: '50%',
                  parent: this,
                  textCancel:"取消",
              })
          }
     },
     created() {
         const rem=JSON.parse(localStorage.getItem("remeber"))
         if(rem!==undefined&&rem!==null){
             this.form.account=rem.account
             this.form.password=rem.account
             this.checked=true
         }
     }
    }
</script>
<style scoped>
    .loginbody {
        width: 100%;
        height: 100%;
        min-width: 1000px;
        background-image: url("../assets/login.jpg");
        background-size: 100% 100%;
        background-position: center center;
        overflow: auto;
        background-repeat: no-repeat;
        position: fixed;
        line-height: 100%;
        padding-top: 150px;
    }

    .logintext {
        margin-bottom: 20px;
        line-height: 50px;
        text-align: center;
        font-size: 40px;
        font-weight: bolder;
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }

    .logindata {

    }

    .tool {
        display: flex;
        justify-content: space-between;
        color: #606266
    }

    .butt {
        margin-top: 10px;
        text-align: center;
    }

    .shou {
        cursor: pointer;
        color: #606266;
    }
    .mydiv {
        width:100%;
        height:100%;
        background-color: black;
        opacity: 0.7;
        color: white;
        border-radius: 10px;

    }

    ::v-deep .el-divider--horizontal{
        margin:10px 0px 0px 0px

    }

    /*ui*/
    /* /deep/ .el-form-item__label {
      font-weight: bolder;
      font-size: 15px;
      text-align: left;
    }

    /deep/ .el-button {
      width: 100%;
      margin-bottom: 10px;

    } */
</style>
